<template>
	<div class="rootbox">
		<!-- 头部 -->
		<div class="goods-header">
			<!-- 换购 -->
			<HuanGou />
			<div class="goods-header-card">
				<van-card
					price="49.00"
					desc="常规款哈哈哈哈哈哈哈"
					title="星级酒店睡感 A类抗菌阻螨可水洗懒人枕"
					thumb="https://yanxuan-item.nosdn.127.net/59431c2017881bb365329f100a7a6780.png"
					origin-price="10.00"
					v-for="n in 3"
				>
					<template #footer>
						<van-button size="mini" type="danger">加入购物车</van-button>
					</template>
				</van-card>
			</div>
			<van-swipe-cell :key="n" v-for="n in 1">
				<van-checkbox checked disabled>
					<van-card num="1" price="12" desc="这是死数据" title="这是死数据" class="goods-card" thumb="https://img01.yzcdn.cn/vant/cat.jpeg" />
				</van-checkbox>
				<template #right>
					<van-button square text="删除" type="danger" class="delete-button" />
				</template>
			</van-swipe-cell>
		</div>
		<div class="goodsbox" v-if="store.cartInfoList.length == 0 ? false : true">
			<van-checkbox v-model="store.allisChecked" @click="checkedAll" ref="checkbox" style="margin-bottom: 10px">
				<HuanGou />
			</van-checkbox>
			<van-swipe-cell class="v_swipe" :key="item.skuId" v-for="(item, index) in store.cartInfoList">
				<van-checkbox class="vcheckbox" v-model="item.isChecked" label-disabled @click="danxuan(item)"> </van-checkbox>
				<van-card :num="item.skuNum" :price="`${item.skuPrice}.00`" desc="描述信息" :title="item.skuName" class="goods-card" :thumb="item.imgUrl">
					<template #footer>
						<van-button size="mini" @click.stop="changeNum(item.skuId, true, item.skuNum)">+</van-button>
						<van-button size="mini" @click.stop="changeNum(item.skuId, false, item.skuNum)">-</van-button>
					</template>
				</van-card>
				<template #right>
					<van-button @click="deleteGood(item.skuId, index)" square text="删除" type="danger" class="delete-button" />
				</template>
			</van-swipe-cell>
		</div>
		<van-submit-bar v-if="store.cartInfoList.length == 0 ? false : true" :price="store.allprice * 100" button-text="结算" :disabled="!store.allprice" @submit="onSubmit">
			<van-checkbox v-model="store.allisChecked" @click="checkedAll">全选</van-checkbox>
		</van-submit-bar>

		<router-link :to="{ path: '/home' }">
			<van-empty description="描述文字" v-if="store.cartInfoList.length == 0 ? true : false">
				<van-button round type="danger" class="bottom-button">没有购买任何商品，去看看吧</van-button>
			</van-empty>
		</router-link>
	</div>
</template>

<script setup>
import HuanGou from './commpents/Huangou.vue';
import { onMounted, ref } from 'vue';
import useCartstore from '../../stores/cart';
import { useRouter } from 'vue-router';
const router = useRouter();
const store = useCartstore();
const dis = ref(null);

onMounted(async () => {
	await store.getCartlist();
});
// 点击结算
const onSubmit = () => {
	router.push({ path: '/cart/submit' });
};
// 点击单选
const danxuan = async (item) => {
	await store.danxuan(item);
};
// 点击全选
const checkedAll = async () => {
	store.allChecked();
};
// 增加或者减少
const changeNum = async (skuid, type, num) => {
	if (num == 1 && !type) return;
	await store.changeNum(skuid, type, num);
};
//删除
const deleteGood = async (skuid, index) => {
	await store.deleteGood(skuid, index);
};
</script>

<script>
export default {
	name: 'Cart',
};
</script>

<style lang="less" scoped>
.rootbox {
	height: 100vh;
	background-color: #f4f4f4;
	padding: 10px;
	height: 100%;
	.goods-header {
		padding: 10px 10px 15px 10px;
		border-radius: 12px;
		margin: 10px 0;
		background-color: #ffffff;

		.goods-header-card {
			display: flex;
			overflow-x: scroll;
			&::-webkit-scrollbar {
				width: 0;
			}
			.van-card {
				flex-shrink: 0;
				margin: 10px;
				border-radius: 12px;
				width: 300px;
				border-radius: 12px;
				:deep(.van-card__thumb) {
					// border: solid 1px red;
					background-color: #f4f4f4;
				}
				.huangoujia {
					span {
						display: block;
					}
				}
			}
			.van-button--mini {
				width: 80px;
			}
		}
	}
	.goodsbox {
		padding: 10px;
		border-radius: 12px;
		background-color: #ffffff;
		// border: solid 1px;
		margin-bottom: 90px;
	}
}

:deep(.van-checkbox) {
	background-color: #ffffff;
	padding-left: 10px;
	.van-checkbox__label {
		width: 100%;
	}
}
:deep(.goods-card) {
	margin: 0;
	background-color: #ffffff;
}
:deep(.delete-button) {
	height: 100%;
}
:deep(.van-submit-bar) {
	bottom: 50px;
	.van-submit-bar__bar {
		height: 50px;
	}
}
:deep(.van-button--mini) {
	width: 40px;
	height: 30px;
}
:deep(.v_swipe) {
	position: relative;
	.vcheckbox {
		display: block;
		width: 20px;
		height: 20px;
		position: absolute;
		z-index: 999;
		left: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	.goods-card{
		margin-left: 20px;
	}
}
</style>
